<template>
    <div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="count"
            :page-size="currentCount"
            layout="total, prev, pager, next, sizes, jumper"
            :total="noticeData.length"
        ></el-pagination>
    </div>
</template>
<script>
import Event from "../utils/Event.js";
export default {
    data: () => {
        return {
            count: [5, 10, 15, 20, 50], //每页显示条数
            currentCount: 5, // 每页显示多少条
            currentPage: 1,//当前页
            noticeData: []
        }
    },
    methods: {
        handleSizeChange(val) {
            this.currentCount = val;
        },
        // 当前页码
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        send() {
            Event.$emit('tableData', {
                tableData: this.tableData
            })
        },
        receive() {
            Event.$on('table', v => {
                this.noticeData = v;
            })
            Event.$on('noticeData', v => {
                this.noticeData = v;
                this.currentPage = 1;
            })
        }
    },
    computed: {
        tableData: function () {
            return this.noticeData.slice(
                (this.currentPage - 1) * this.currentCount,
                this.currentPage * this.currentCount
            );
        },
    },

    mounted() {
        this.receive();
    },
    beforeUpdate() {
        this.send();
    }
}
</script>
<style scoped>
.el-pagination{
    text-align: center;
}
</style>